import React, { Component } from 'react'

// 非受控组件适合不需要传值的场景，组件内部自己使用；如果需要传值，跨组件使用，则使用受控组件，和状态值绑定
export default class App extends Component {
    myUserName = React.createRef()

    render() {
        return (
            <div>
                <h1>登录页</h1>
                {/* 现象：给input输入框value值以后，报错，且无法修改了 */}
                {/* value属性是给受控组件用的，defaultValue是给非受控组件用的 */}
                <input type='text' ref={this.myUserName} defaultValue='Mr.Liu' />

                <button onClick={() => {
                    console.log(this.myUserName.current.value);
                }}>登录</button>
                <button onClick={() => {
                    this.myUserName.current.value = ''
                }}>重置</button>
            </div>
        )
    }
}
